<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <meta name="description" content="网站描述" />
    <meta name="keywords" content="关键词" />
    <link rel="stylesheet" href="./style/reset.css">
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
    <!-- 头部导航 -->
    <div class="wrap_header">
        <div class="head_box">
            <div class="head_navigator">
                <a class="nav_item on" href="./index.html">首页</a>
                <a class="nav_item" href="./news.html">新闻中心</a>
                <a class="nav_item" href="">企业资讯</a>
                <a class="nav_item" href="">客服中心</a>
                <a class="nav_item" href="">招聘中心</a>
                <a class="nav_search" href=""><i class="icon_search"></i>查询/申请</a>
            </div>
            <h1 class="logo"><img src="./images/logo.png"/><span class="title">苏州奇才充电桩</span></h1>
        </div>
    </div>

    <div class="wrap_main common_main">
        <h2 class="line_head"><a href="./index.html" class="go_home">首页 ></a> 电价电费</h2>

        <div class="filter_box">
            <ul>
                <li>
                    <span class="filter_name">区域：</span>
                    <div class="filter_list">
                        <div class="filter_item">
                            <input id="area_1" type="radio" checked name="area" value="1">
                            <label for="area_1">不限</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_2" type="radio" name="area" value="2">
                            <label for="area_2">常州</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_3" type="radio" name="area" value="3">
                            <label for="area_3">无锡</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_4" type="radio" name="area" value="4">
                            <label for="area_4">上海</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_5" type="radio" name="area" value="5">
                            <label for="area_5">苏州</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_6" type="radio" name="area" value="6">
                            <label for="area_6">广州</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_7" type="radio" name="area" value="7">
                            <label for="area_7">杭州</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_8" type="radio" name="area" value="8">
                            <label for="area_8">深圳</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_9" type="radio" name="area" value="9">
                            <label for="area_9">南山</label>
                        </div>
                        <div class="filter_item">
                            <input id="area_10" type="radio" name="area" value="10">
                            <label for="area_10">温州</label>
                        </div>
                    </div>
                </li>

                <li>
                    <span class="filter_name">充电站：</span>
                    <div class="filter_list">
                        <div class="filter_item">
                            <input id="station_1" type="radio" checked name="station" value="1">
                            <label for="station_1">不限</label>
                        </div>
                        <div class="filter_item">
                            <input id="station_2" type="radio" name="station" value="2">
                            <label for="station_2">A站</label>
                        </div>
                        <div class="filter_item">
                            <input id="station_3" type="radio" name="station" value="3">
                            <label for="station_3">B站</label>
                        </div>
                        <div class="filter_item">
                            <input id="station_4" type="radio" name="station" value="4">
                            <label for="station_4">C站</label>
                        </div>
                        <div class="filter_item">
                            <input id="station_5" type="radio" name="station" value="5">
                            <label for="station_5">D站</label>
                        </div>
                    </div>
                </li>

                <li>
                    <span class="filter_name">充电桩：</span>
                    <div class="filter_list">
                        <div class="filter_item">
                            <input id="pile_1" type="radio" checked name="pile" value="1">
                            <label for="pile_1">不限</label>
                        </div>
                        <div class="filter_item">
                            <input id="pile_2" type="radio" name="pile" value="2">
                            <label for="pile_2">交流桩</label>
                        </div>
                        <div class="filter_item">
                            <input id="pile_3" type="radio" name="pile" value="3">
                            <label for="pile_3">直流桩</label>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="ev_wrap">
            <div class="ev_box">
                <div class="box_head">
                    <h2 class="title">A站 交流桩_001桩</h2>
                    <p class="desc">常州</p>
                </div>
                <div class="ev_table">
                    <ul>
                        <li class="ev_item">
                            <span class="item">时间段</span>
                            <span class="item">电费（元/度）</span>
                            <span class="item">服务费（元/度）</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">00:00 - 08:00</span>
                            <span class="item">0.44</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">08:00 - 09:00</span>
                            <span class="item">0.80</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">09:00 - 12:00</span>
                            <span class="item">1.2</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">00:00 - 08:00</span>
                            <span class="item">0.44</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">08:00 - 09:00</span>
                            <span class="item">0.80</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">09:00 - 12:00</span>
                            <span class="item">1.2</span>
                            <span class="item">1.0</span>
                        </li>
                    </ul>
                </div>
            </div>
    
            <div class="ev_box">
                <div class="box_head">
                    <h2 class="title">B站 交流桩_001桩</h2>
                    <p class="desc">常州</p>
                </div>
                <div class="ev_table">
                    <ul>
                        <li class="ev_item">
                            <span class="item">时间段</span>
                            <span class="item">电费（元/度）</span>
                            <span class="item">服务费（元/度）</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">00:00 - 08:00</span>
                            <span class="item">0.44</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">08:00 - 09:00</span>
                            <span class="item">0.80</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">09:00 - 12:00</span>
                            <span class="item">1.2</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">00:00 - 08:00</span>
                            <span class="item">0.44</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">08:00 - 09:00</span>
                            <span class="item">0.80</span>
                            <span class="item">1.0</span>
                        </li>
                        <li class="ev_item">
                            <span class="item">09:00 - 12:00</span>
                            <span class="item">1.2</span>
                            <span class="item">1.0</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="pagination"></div>
    </div>

    <div class="wrap_footer">
        <div class="footer_main clearfix">
            <div class="footer_code">
                <img src="./images/code.png">
                <p class="tip">扫码下载APP，优惠多多</p>
            </div>
            <div class="footer_info">
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
                <p>苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语苏州充电桩宣传语</p>
            </div>
        </div>
        <p class="website_info">Copyringht 2018苏州充电桩 ｜<span>All rights reserved</span><span>ICP备：CZ0001234567</span></p>
    </div>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.page.js"></script>
    <script>
        // 分页
        $('.pagination').jqPaginator({
            totalPages:14,
            visiblePages: 5,
            currentPage: 2,
            prev:'<li class="prev"><a href="javascript:;">上一页</a></li>',
            next:'<li class="next"><a href="javascript:;">下一页</a></li>',
            page: `<li class="page"><a href="javascript:;">{{page}}</a></li>`,
            onPageChange: function (page) {
                console.log(page)
            }
        });
    </script>     
</body>
</html>